<template>
    <view class="logistics-info">
        <view class="top-header">
            <view class="title">快递公司：{{edName}}</view>
            <view class="content">快递单号：{{edNum}}</view>
        </view>
        <view class="logistics-detail">
            <view class="logistics-wrapper" v-if="logisticsData.length">
                <view v-for="(item, index) in logisticsData" :key="index" class="logistics-item">
                    <view class="time">{{item.time}}</view>
                    <view class="item-conten">{{item.context}}</view>
                    <text class="dot"/>
                </view>
            </view>
            <view v-else>暂无物流信息</view>
        </view>
    </view>
</template>

<script>
    import service from '@/service';
    export default {
        name: "logistics-info",
        data(){
            return{
                orderId: '',
                edNum: '',
                edName: '',
                logisticsData: []
            }
        },
        onLoad(params){
            let { orderId } = params
            this.orderId = orderId;
            this.inquiryLogistics();
        },
        methods: {
            inquiryLogistics(){
                uni.showLoading({
                    title: '加载中'
                });
                service.mineService.inquiryLogistics({
                    data: {
                        orderId: this.orderId,
                        type: 2
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.logisticsData = res.result.data || []
                            this.edName = res.result.edName
                            this.edNum = res.result.edNum
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .logistics-info{
        min-height: 100%;
        .top-header{
            width:100%;
            height:241rpx;
            background: #2BA8FC;
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            color: #fff;
            .title{
                font-weight: bold;
            }
            .content{
                font-size: 24rpx;
                margin-top: 10rpx;
            }
        }
        .logistics-detail{
            position: relative;
            top: -100rpx;
            width: 690rpx;
            margin: 0 auto;
            background:rgba(255,255,255,1);
            box-shadow:0 3rpx 20rpx rgba(0,0,0,0.06);
            border-radius: 20rpx;
            padding: 90rpx 30rpx 20rpx 64rpx;
            box-sizing: border-box;
            .logistics-wrapper{
                border-left: 4rpx solid #2BA8FC;
                padding-left: 62rpx;
                padding-top: 30rpx;
                padding-bottom: 20rpx;
                .logistics-item{
                    position: relative;
                    box-sizing: border-box;
                    margin-bottom: 40rpx;
                }
                .dot{
                    position: absolute;
                    left: -74rpx;
                    top: 4rpx;
                    width: 20rpx;
                    height: 20rpx;
                    border-radius: 50%;
                    background: #2BA8FC;
                }
                .time {
                    color: #999999;
                    margin-bottom: 10rpx;
                }
                .item-conten{
                    color: #999999;
                }
            }
        }
    }
</style>